<!-- 海康 》 实时预览 -->

<template>
  <DeviceBody
    class="VideoPlay"
    :class="{ 'VideoPlay-folded': fold }"
    :checkDisable="checkDisable"
    filterTip="请输入名称或编号"
    diy
  >
    <EasyCard class="VideoPlay-control">
      <template #title>
        <span>云台控制</span>
        <BtnText @click="fold = !fold"><i class="el-icon-arrow-down" /></BtnText>
      </template>

      <MyControl />
    </EasyCard>

    <EasyCard full>
      <HkPlayer ref="player" :value="chosen.thirdCode" @change="toChange" />
    </EasyCard>
  </DeviceBody>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'
import mixDevice from '@admin/views/Secure/mixDevice'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'HaikangPlay',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixDevice(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('@admin/components/CommonVideo', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      fold: true, // 是否折叠
    }
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听选中设备
     */
    chosen({ id, thirdCode }) {
      if (id && thirdCode) this.MAP[thirdCode] = id // 缓存映射
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.MAP.PLAYER = this.$refs.player
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 检查是否禁用
     */
    checkDisable(device) {
      return !device.thirdCode
    },

    /**
     * 播放器变化
     */
    toChange({ type, msg }) {
      const { MAP, control_one } = this
      if (type === 1 || type === 2) { // 1 点击窗口, 2 开始播放
        this.$set(control_one, 'cameraId', MAP[msg.cameraIndexCode] || '') // 记录当前控制的摄像头 ID
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
